import React, { useEffect, useState } from 'react'
import hh from "./css/pageone.module.css"

export default function pageone() {

    let id = 0;
    let add = () => {
        id++;
        let rr = 'one' + id;
        let tt = 'two' + id;
        console.log(rr);
        let hh = document.createElement("input");
        hh.setAttribute("draggable", "true");
        hh.setAttribute("id", rr);
        hh.ondragstart = function (event: any) {
            var e = event || window.event
            console.log('开始拖拽');
            e.dataTransfer.setData('text', e.target.id);
        }
        let qq: any = document.getElementById("bigbox");
        let two: any = document.getElementById("two");

        qq.appendChild(hh);
        two.ondragenter = function () { }
        two.ondragover = function (event: any) {
            var event = event || window.event;
            event.preventDefault()
        }
        two.ondragleave = function () { }
        two.ondrop = function (event: any) {
            var e = event || window.event;
            var data = e.dataTransfer.getData('text');
            let ele: any = document.getElementById(data);
            let father = document.createElement("div");
            father.style.position = "relative"
            let cha = document.createElement("div");
            cha.style.position = "absolute";
            cha.style.display = "none";
            cha.style.right = "40px";
            cha.style.top = "-13px";
            cha.style.width = "30px";
            cha.style.height = "30px";
            cha.style.borderRadius = "15px";
            cha.style.backgroundColor = "black";
            cha.style.color = "white";
            cha.style.textAlign = "center";
            cha.style.lineHeight = "25px";
            cha.style.fontSize = "24px";
            cha.innerHTML = "×";

            father.onmouseenter = () => {
                cha.style.display = "block";
            }
            father.onmouseleave = () => {
                cha.style.display = "none";
            }
            cha.setAttribute("id", tt);
            cha.onclick = (e: any) => {
                e.target.parentNode.remove();
            }
            father.appendChild(ele);
            father.appendChild(cha);
            e.target.appendChild(father);
            var ol: any = document.getElementById('two');
            let inputlist = ol.getElementsByTagName('input');
        }
    }
    return (
        <div className={hh.box}>
            <div>
                <p>
                    Prepare to study
                </p>
                <div className={hh.input} id='bigbox'>

                </div>
                <div className={hh.add} onClick={() => {
                    add()
                }}>
                    +
                </div>
            </div>
            <div id='two' className={hh.two}>
                <p>
                    Learning....
                </p>
            </div>
            <div id="rfre">
                <p>
                    Complete
                </p>
            </div>

        </div>
    )
}
